<template>
	<view class="lightLayout">
		<view class="lightLeft border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ ll_title }}
				</view>
				<view class="lleft_echart">
					<uni-echarts ref="echartsll" :option="optionLValue" canvasId="echartsll"></uni-echarts>
				</view>
			</view>
		</view>
		<view class="lightRight border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ lr_title }}
				</view>
				<view class="light-right-container">
					<div class="right-content">
						<div v-for="item in rightInfos" :key="item.id" class="right-info">
							<img :src="item.img" alt="图片" class="right-img" />
							<span class="right-text">{{ item.text }}</span>
							<span
								:class="item.id === '1' ? 'right-num' : item.id === '2' ? 'right-num1' : 'right-num2'">{{ item.num }}</span>
						</div>
					</div>
					<div class="right-chart">
						<div id="echartsr1" class="echartsr-container"></div>
						<div id="echartsr2" class="echartsr-container"></div>
						<div id="echartsr3" class="echartsr-container"></div>
					</div>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import store from '@/store/index.js';
	import * as echarts from 'echarts';
	import UniEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {
		optionLightValue,
		optionLightR1Value,
		optionLightR2Value,
		optionLightR3Value
	} from "@/common/light_echart_data.js";
	export default {
		components: {
			UniEcharts
		},
		data() {
			return {
				ll_title: '照明-能耗数据(最近24小时)',
				lr_title: '照明运行数据',
				angleArc: 210,
				timerInterval: '',
				optionLValue: {},
				optionRValue1: {},
				optionRValue2: {},
				optionRValue3: {},
				echartInstance1: {},
				echartInstance2: {},
				echartInstance3: {},
				screenFont: 12,
				rightInfos: [{
						id: '1',
						img: 'http://portal.xumengte.com/homeImg/zj.png',
						num: 220,
					},
					{
						id: '2',
						img: 'http://portal.xumengte.com/homeImg/zx.png',
						text: '在线',
						num: 220,
					},
					{
						id: '3',
						img: 'http://portal.xumengte.com/homeImg/lx.png',
						text: '离线',
						num: 0,
					},
				],
			}
		},
		unmounted() {
			clearInterval(this.timerInterval)
		},
		mounted() {
			let that = this;
			this.screenFont = store.state.screenWidth / 1920 * 16;
			this.optionLValue = optionLightValue;
			this.optionRValue1 = {
				title: optionLightR1Value.title,
				series: [{
						name: 'ring5',
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: function(params, api) {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75, //线的位置
									startAngle: (270 - that.angleArc) * Math.PI / 180,
									endAngle: (40 - that.angleArc) * Math.PI / 180
								},
								style: {
									stroke: "#73DEFF",
									fill: "transparent",
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					},
					{
						name: 'ring5',
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: function(params, api) {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75, //线的位置
									startAngle: (90 - that.angleArc) * Math.PI / 180,
									endAngle: (220 - that.angleArc) * Math.PI / 180
								},
								style: {
									stroke: "#73DEFF",
									fill: "transparent",
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					},
					optionLightR1Value.series[2]
				]
			};
			this.optionRValue2 = {
				title: optionLightR2Value.title,
				series: [{
						name: 'ring5',
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: function(params, api) {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75, //线的位置
									startAngle: (270 - that.angleArc) * Math.PI / 180,
									endAngle: (40 - that.angleArc) * Math.PI / 180
								},
								style: {
									stroke: "#73DEFF",
									fill: "transparent",
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					},
					{
						name: 'ring5',
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: function(params, api) {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75, //线的位置
									startAngle: (90 - that.angleArc) * Math.PI / 180,
									endAngle: (220 - that.angleArc) * Math.PI / 180
								},
								style: {
									stroke: "#73DEFF",
									fill: "transparent",
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					},
					optionLightR2Value.series[2]
				]
			};
			this.optionRValue3 = {
				title: optionLightR3Value.title,
				series: [{
						name: 'ring5',
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: function(params, api) {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75, //线的位置
									startAngle: (270 - that.angleArc) * Math.PI / 180,
									endAngle: (40 - that.angleArc) * Math.PI / 180
								},
								style: {
									stroke: "#73DEFF",
									fill: "transparent",
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					},
					{
						name: 'ring5',
						type: 'custom',
						coordinateSystem: 'none',
						renderItem: function(params, api) {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75, //线的位置
									startAngle: (90 - that.angleArc) * Math.PI / 180,
									endAngle: (220 - that.angleArc) * Math.PI / 180
								},
								style: {
									stroke: "#73DEFF",
									fill: "transparent",
									lineWidth: 1.5
								},
								silent: true
							};
						},
						data: [0]
					},
					optionLightR3Value.series[2]
				]
			};
			that.optionRValue1.title.textStyle.rich.a.fontSize = this.screenFont;
			that.optionRValue1.title.textStyle.rich.c.fontSize = this.screenFont * 1.2;
			that.optionRValue2.title.textStyle.rich.a.fontSize = this.screenFont;
			that.optionRValue2.title.textStyle.rich.c.fontSize = this.screenFont * 1.2;
			that.optionRValue3.title.textStyle.rich.a.fontSize = this.screenFont;
			that.optionRValue3.title.textStyle.rich.b.fontSize = this.screenFont * 1.2;
			this.$nextTick(() => {
				let chartDom1 = document.getElementById('echartsr1');
				that.echartInstance1 = echarts.init(chartDom1);
				that.echartInstance1.setOption(that.optionRValue1);
				let chartDom2 = document.getElementById('echartsr2');
				that.echartInstance2 = echarts.init(chartDom2);
				that.echartInstance2.setOption(that.optionRValue2);
				let chartDom3 = document.getElementById('echartsr3');
				that.echartInstance3 = echarts.init(chartDom3);
				that.echartInstance3.setOption(that.optionRValue3);
			});

			// this.timerInterval = setInterval(function() {
			// 	that.angleArc = that.angleArc + 3;
			// 	that.echartInstance1.setOption(that.optionRValue1);
			// 	that.echartInstance2.setOption(that.optionRValue2);
			// 	that.echartInstance3.setOption(that.optionRValue3);
			// }, 100);

		},
		methods: {

		},
	}
</script>
<style>
	@import 'index.css';
</style>
